<script setup>
  import { onMounted, ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import PageHeader from "@/components/PageHeader.vue";
  const router = useRouter()
  const route = useRoute()
  const orderSn = ref()
  const payment = ref()
  const pageType = ref()
  const goBack = () => router.back()
  const goOrder = () => {
    if (pageType.value === 'order') router.replace({name: 'order', query: {order_sn: orderSn.value}})
    else router.replace({name: 'giftOrderDetail', query: {id: orderSn.value}})
  }
  onMounted(() => {
    const { order_sn, price, type } =route.query
    orderSn.value = order_sn
    payment.value = price
    pageType.value = type
  })
</script>

<template>
  <div class="success-page">
    <PageHeader/>
    <a-result
      status="success"
      :title="pageType==='pay'?'支付成功!':'下单成功!'"
      :sub-title="'订单编号：'+ orderSn +'；订单金额：' + payment"
    >
      <template #extra>
        <a-button type="primary" @click="goBack"> 返回 </a-button>
        <a-button @click="goOrder"> 查看订单 </a-button>
      </template>
    </a-result>
  </div>
</template>

<style scoped lang="scss">
  .success-page {
    padding: 30px;
  }
</style>